<template>
    <div class="content">
        <el-row :gutter="20">
            <el-col :span="12">
                <el-button size="small" type="primary" :icon="CirclePlus" @click="onInsert">添加</el-button>
            </el-col>
            <el-col :span="12" class="text-right">
                <el-button size="small" type="primary" class="ml10" :icon="RefreshRight" @click="onSearch('Refresh')" />
            </el-col>
        </el-row>
        <el-table class="mt20" ref="multipleTableRef" :data="tableData" border v-loading="form.loading" style="width: 100%;font-size: 16px;" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column type="index" :index="indexMethod" label="序号" width="60" />
            <el-table-column prop="name" label="姓名" show-overflow-tooltip />
            <el-table-column prop="mobile" label="手机号码" width="120" />
            <el-table-column label="角色">
                <template #default="scope">
                    <el-text v-if="scope.row.role">{{ scope.row.role.name }}</el-text>
                </template>
            </el-table-column>
            <el-table-column prop="created_at" label="创建时间" width="180" />
            <el-table-column fixed="right" label="操作" min-width="100">
                <template #header>
                    <el-input v-model="form.search" size="small" :icon="Search" placeholder="请输入姓名/手机号" @input="onSearch" clearable />
                </template>
            </el-table-column>
        </el-table>
    </div>

</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { CirclePlus, Search,RefreshRight } from '@element-plus/icons-vue'
import { ElMessage, TableInstance } from 'element-plus'
import http from '../../../../util/request';
const indexMethod = (index: number) => {
  return index+= 1
}

const form = ref<any>({search:'',page:0,current:0,total:10,limit:20,loading:false})
interface Project {
    id: number
    name: string
    mobile:string
    projects: []
    created_at: string
}
const tableData = ref<Project[]>([])
const tableDataSearch = ref<Project[]>([])
const multipleSelection = ref<Project[]>([])
const multipleTableRef = ref<TableInstance>()
const projectId = ref<number>(0)

const onGetData = () => {
    
    form.value.loading = true
    
    http.post('/user',form.value).then((response:any)=>{
        form.value.loading = false
        tableDataSearch.value = response.data.data
        tableData.value = response.data.data
        tableData.value.forEach((e:Project) => {
            e.projects.forEach((p:any) => {
                if(p.id == projectId.value){
                    console.log(e)
                    setTimeout(() => {
                        multipleTableRef.value!.toggleRowSelection(e,true)
                    },200)
                }
            });
        });
        form.value.total = response.data.total
    })
}

const props = defineProps<{
    data:any
}>()

watch(props,()=>{
    projectId.value = props.data
    onGetData()
},{ immediate: true })



const onSearch = (type:string = '') => {
    if(type == 'Refresh'){
        form.value.search = ''
        onGetData()
        return
    }
    let arr:Project[] = []

    tableDataSearch.value.forEach((e:Project) => {
        if(e.name.indexOf(form.value.search) != -1 || e.mobile.indexOf(form.value.search) != -1){
            arr.push(e)
        }
    });
    tableData.value = arr
}

const handleSelectionChange = (val: Project[]) => {
    multipleSelection.value = val
}

const onInsert = () => {
    if(!multipleSelection.value.length){
        ElMessage.error('请选择人员');
        return
    }
    let userId:number[] = []
    multipleSelection.value.forEach((e:Project) => {
        userId.push(e.id)
    });
    let obj:any = {
        project_id:projectId.value,
        users:JSON.stringify(userId)
    }
    http.post('/projectBindUser',obj).then((response:any)=>{
        if(response.data.code != 200){
            ElMessage.error(response.data.msg);return;
        }
        ElMessage.success(response.data.msg);
        saveBind();
    })
}

const saveBind = () => {
    emit('saveBind')
}

const emit = defineEmits(['saveBind'])

</script>

<style scoped>

</style>